<template>
  <span :class="[$style.load,color==='white'?$style.loadWhite:'']" />
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: undefined
    }
  }
}
</script>

<style module>
.load {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-position: 50%;
  background-size: 100%;
  background-repeat: no-repeat;
  animation: preloader-spin 1s steps(12) infinite;
  background-image: url();
}

.loadWhite {
  background-image: url();
}

@keyframes preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}
</style>
